<script>

import Purpose from './Purpose.vue'
import CarbonNeutralityStandardizationStatus
  from '@/views/carbonNeutrality/carbonNeutralityPlanReport/CarbonNeutralityStandardizationStatus.vue'
import CarbonNeutralityActualSituation
  from '@/views/carbonNeutrality/carbonNeutralityPlanReport/CarbonNeutralityActualSituation.vue'
import CarbonNeutralityDeviationSituation
  from '@/views/carbonNeutrality/carbonNeutralityPlanReport/CarbonNeutralityDeviationSituation.vue'
import RegulatoryTrends from '@/views/carbonNeutrality/carbonNeutralityPlanReport/RegulatoryTrends.vue'
import ImprovementSuggestion from '@/views/carbonNeutrality/carbonNeutralityPlanReport/ImprovementSuggestion.vue'
import { now, subtractDateStr } from '@/utils/date-utils'

export default {
  name: 'CarbonEmissionReport',
  components: {
    ImprovementSuggestion,
    RegulatoryTrends,
    CarbonNeutralityDeviationSituation,
    CarbonNeutralityActualSituation,
    CarbonNeutralityStandardizationStatus,
    Purpose
  },
  data() {
    return {
      queryForm: {
        sceneProjectId: null,
        statisticsMode: 'day', // hour:时，day:日,month: 月,year: 年,
        startTime: null,
        endTime: null
      },
      loading: false,
      dataResult: {
        startDate: null,
        endDate: null,
        projectData: {},
        projectTotalList: []
      },
      projectList: [],
      datePickerType: 'date',
      timeFormat: 'yyyy-MM-dd',
      startTimeOption: {
        disabledDate: this.disabledStartDate
      },
      endTimeOption: {
        disabledDate: this.disabledEndDate
      }
    }
  },
  created() {
    this.statisticsModeChangeHandler()
    this.$api.commonSelected({
      code: 'SceneProjectSelected'
    }).then(response => {
      this.projectList = response.data
      if (this.projectList.length > 0) {
        this.queryForm.sceneProjectId = this.projectList[0].value
      }
      this.getList()
    })
  },
  methods: {
    disabledStartDate(time) {
      if (this.queryForm.endTime == null) {
        return false
      }
      let threshold = 0
      switch (this.queryForm.statisticsMode) {
        case 'hour':
          threshold = 8
          break
        case 'day':
          threshold = 32
          break
        case 'month':
          threshold = 366
          break
        case 'year':
          threshold = 365 * 5
          break
      }
      const date = new Date()
      date.setTime(Date.parse(this.queryForm.endTime) - threshold * 86400000)
      const result = time.getTime() > date.getTime() && time.getTime() < Date.parse(this.queryForm.endTime)
      return !result
    },
    disabledEndDate(time) {
      if (this.queryForm.startTime == null) {
        return false
      }
      let threshold = 0
      switch (this.queryForm.statisticsMode) {
        case 'hour':
          threshold = 8
          break
        case 'day':
          threshold = 32
          break
        case 'month':
          threshold = 366
          break
        case 'year':
          threshold = 365 * 3
          break
      }
      const date = new Date()
      date.setTime(Date.parse(this.queryForm.startTime) + threshold * 86400000)
      const result = time.getTime() > Date.parse(this.queryForm.startTime) && time.getTime() < date.getTime()
      return !result
    },
    statisticsModeChangeHandler() {
      switch (this.queryForm.statisticsMode) {
        case 'day':
          this.datePickerType = 'date'
          this.timeFormat = 'yyyy-MM-dd'
          if (this.queryForm.startTime == null) {
            this.queryForm.startTime = subtractDateStr(new Date(), 7, this.timeFormat.toUpperCase())
          }
          if (this.queryForm.endTime == null) {
            this.queryForm.endTime = now(this.timeFormat.toUpperCase())
          }
          break
        case 'month':
          this.datePickerType = 'month'
          this.timeFormat = 'yyyy-MM'
          break
        case 'year':
          this.datePickerType = 'year'
          this.timeFormat = 'yyyy'
          break
      }
    },
    resetHandler() {
      this.queryForm = {
        statisticsMode: this.queryForm.statisticsMode,
        sceneProjectId: this.queryForm.sceneProjectId
      }
      this.getList()
    },
    getList() {
      this.loading = true
      const param = {
        statisticsMode: this.queryForm.statisticsMode,
        solidifyDateStart: this.queryForm.startTime,
        solidifyDateEnd: this.queryForm.endTime,
        sceneProjectId: this.queryForm.sceneProjectId
      }
      this.$api.carbonNeutralityPlanReport.queryStandardizationData(param)
        .then(response => {
          this.$set(this.dataResult, 'startDate', response.data.startDate)
          this.$set(this.dataResult, 'endDate', response.data.endDate)
          this.$set(this.dataResult, 'projectData', response.data.projectData)
          this.$set(this.dataResult, 'projectTotalList', response.data.projectTotalList)
        }).finally(() => this.loading = false)
    }
  }
}
</script>

<template>
  <div class="carbonNeutralityPlanReport">
    <el-form :model="queryForm" inline>
      <el-form-item>
        <el-radio-group v-model="queryForm.statisticsMode" @change="statisticsModeChangeHandler" size="small">
          <el-radio-button label="day">按日</el-radio-button>
          <el-radio-button label="month">按月</el-radio-button>
          <el-radio-button label="year">按年</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属项目" prop="sceneProjectId">
        <el-select v-model="queryForm.sceneProjectId">
          <el-option v-for="item in projectList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="queryForm.startTime" :type="datePickerType" :format="timeFormat"
                        :value-format="timeFormat"
                        :picker-options="startTimeOption"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="queryForm.endTime" :type="datePickerType" :format="timeFormat"
                        :value-format="timeFormat"
                        :picker-options="endTimeOption"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="getList" type="primary" icon="el-icon-search">查询</el-button>
        <el-button size="small" @click="resetHandler" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="padding: 0 5%" v-loading="loading">
      <Purpose />
      <CarbonNeutralityStandardizationStatus :page-data="dataResult" :project-list="projectList" />
      <CarbonNeutralityActualSituation :page-data="dataResult" :project-list="projectList" />
      <CarbonNeutralityDeviationSituation :page-data="dataResult" :project-list="projectList" />
      <RegulatoryTrends :page-data="dataResult" :project-list="projectList" />
      <ImprovementSuggestion :page-data="dataResult" :project-list="projectList" :query-params="queryForm" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.carbonNeutralityPlanReport {
  overflow-y: auto;
  padding: 15px;
  background-color: #ffffff;
  height: 100%;
}
</style>
